<template>
	<view :style="$theme.pageStyle">
		<gb-tab :tabBarArr="tabList" :tabIndex="tabIndex" @tabtap="tabtap" style="position:sticky;"></gb-tab>
		<view style="margin-top: 150px;" v-if="DataList.length == 0">
			<u-empty
			        mode="data"
			        text="暂无数据"
			>
			</u-empty>
		</view>
			
		<view v-for="(item,index) in DataList" :key="index">
			<view class="card-item">
				<view class="card-item-left">
					<view class="card-item-title">
						<view class="title">
							{{item.name}}
							<span class="title_number" v-if="item.number === 0">不限次数</span>
							<span class="title_number" v-else>剩余{{item.number}}次</span>
						</view>
					</view>
					<view class="card-date">
						有效期：{{item.start_time}} - {{item.end_time}}
					</view>
				</view>
				<view class="card-item-right" @click="ToUrl('/service/equity/use')">
					去使用
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				DataList: [],
				scrollTop: 0,
				tabList: [{
						name: '全部'
					},
					{
						name: '待使用'
					},
					{
						name: '待激活'
					},
					{
						name: '已结束'
					}
				],
				tabIndex: 0,
			}
		},
		onLoad(opt) {
			// this.tabIndex = Number(opt.tab)
			this.timeer()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			// tabbar点击事件
			tabtap(index) {
				if (this.tabIndex != index) {
					this.DataList = [];
					this.tabIndex = index;
					this.timeer()
				}
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('user/equityCard', {
						'page': page,
						'limit': this.limit,
						'index': this.tabIndex
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			ToUrl(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>

	.card-item{
		margin: 15px;
		background: #fff;
		border-radius: 15px;
		padding: 10px;
		height: 100px;
		display: flex;
		align-items: center;
		.card-item-left{
			width: 80%;
			.card-item-title{
				font-size: 16px;
				font-weight: bold;
				line-height: 50px;
				.title{
					.title_number{
						font-size: 12px;
						color:var(--color-primary);
					}
				}
			}
			.card-date{
				font-size: 14px;
				color: #666;
			}
		}
		.card-item-right{
			width: 20%;
			height: 40px;
			background: var(--color-primary);
			color: #fff;
			line-height: 40px;
			border-radius: 8px;
			margin: 0px 5px 0px 5px;
			font-size: 14px;
			text-align: center;
		}
	}
	
	
	
</style>